<template>
  <div>
    <dialog-diy
      ref="dialogDiy"
      dialog-width="700px"
      title="客户进件填写信息"
      :title-center="true"
    >
      <div v-loading="loading">
        <div class="msg-main" v-if="detailInfo.channelOrderNo">
          <div class="msg-item">
            <div>公司名称：</div>
            <div>
              {{ detailInfo.companyName ? detailInfo.companyName : "-" }}
            </div>
          </div>
          <div class="msg-item">
            <div>申请人姓名：</div>
            <div>
              {{ detailInfo.name ? detailInfo.name : "-" }}
            </div>
          </div>
          <div class="msg-item">
            <div>申请人身份证：</div>
            <div>{{ detailInfo.idCard ? detailInfo.idCard : "-" }}</div>
          </div>

          <div class="msg-item">
            <div>申请人身份：</div>
            <div>
              {{
                detailInfo.applyType
                  ? detailInfo.applyType == "LEGAL"
                    ? "法人"
                    : "股东"
                  : "-"
              }}
            </div>
          </div>
          <div class="msg-item">
            <div>申请人手机：</div>
            <div>{{ detailInfo.phone ? detailInfo.phone : "-" }}</div>
          </div>
          <div class="msg-item">
            <div>申请城市：</div>
            <div>{{ detailInfo.wholeName ? detailInfo.wholeName : "-" }}</div>
          </div>
          <div class="msg-item">
            <div>申请期限：</div>
            <div>{{ detailInfo.applyTerm ? detailInfo.applyTerm : "-" }}</div>
          </div>
          <div class="msg-item">
            <div>申请金额：</div>
            <div>
              {{ detailInfo.applyAmount ? detailInfo.applyAmount : "-" }}
            </div>
          </div>
        </div>
        <div v-else class="msg-main">
          <el-form size="small" :model="form" label-width="120px">
            <el-form-item label="公司名称：">
              <el-input
                style="width: 500px"
                v-model="form.companyName"
                placeholder="请输入公司名称"
              />
            </el-form-item>
            <el-form-item label="申请人姓名：">
              <el-input
                style="width: 500px"
                v-model="form.name"
                placeholder="请输入申请人姓名"
              />
            </el-form-item>
            <el-form-item label="申请人身份证：">
              <el-input
                :maxlength="18"
                style="width: 500px"
                v-model="form.idCard"
                placeholder="请输入申请人身份证"
              />
            </el-form-item>
            <el-form-item label="申请人身份：">
              <el-select
                style="width: 500px"
                v-model="form.applyType"
                placeholder="请选择申请人身份"
              >
                <el-option
                  v-for="item in sfList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请人手机：">
              <el-input
                :maxlength="11"
                style="width: 500px"
                v-model="form.phone"
                placeholder="请输入申请人手机"
              />
            </el-form-item>
            <el-form-item label="申请城市：">
              <el-cascader
                clearable
                :props="props"
                style="width: 500px"
                v-model="form.areaCode"
                :options="cityList"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="申请期限：">
              <el-select
                style="width: 500px"
                v-model="form.applyTerm"
                placeholder="请选择申请人身份"
              >
                <el-option
                  v-for="item in applyTermList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请金额：">
              <el-input
                style="width: 500px"
                v-model="form.applyAmount"
                placeholder="请输入申请金额"
              />
            </el-form-item>

            <el-form-item label="">
              <el-button style="width: 80px" type="primary" @click="onsubmit()"
                >修改</el-button
              >
              <el-button style="width: 80px" @click="cancleMsg()"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </dialog-diy>
  </div>
</template>
<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import {
  getkeyikeDetail,
  updatekeyikeOrder
} from "../../../../api/incomingManagement";
import { getAreaTree } from "../../../../api/system";

export default {
  components: {
    dialogDiy
  },
  name: "customerDetail",
  data() {
    return {
      detailInfo: {},
      loading: false,
      applyTermList: [
        { label: "6期", value: 6 },
        { label: "12期", value: 12 },
        { label: "18期", value: 18 },
        { label: "24期", value: 24 }
      ],
      sfList: [
        { label: "法人", value: "LEGAL" },
        {
          label: "股东",
          value: "SHARE"
        }
      ],
      form: {
        companyName: null,
        name: null,
        idCard: null,
        applyType: null,
        phone: null,
        areaCode: null,
        applyTerm: null,
        applyAmount: null
      },
      cityList: [],
      props: {
        emitPath: false
      },
      key: 0
    };
  },
  created() {
    this.getCityList();
  },
  methods: {
    cancleMsg() {
      this.$refs.dialogDiy.handleClose();
    },
    onsubmit() {
      updatekeyikeOrder(this.form).then(res => {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.$emit("getList");
        this.$refs.dialogDiy.handleClose();
      });
    },
    getCityList() {
      getAreaTree().then(res => {
        this.cityList = res.data;
      });
    },
    opendialog(v) {
      this.loading = true;
      getkeyikeDetail(v.orderNo)
        .then(res => {
          this.detailInfo = res.data;
          this.form = {
            id: res.data.id,
            ...this.form,
            ...Object.keys(this.form).reduce((filtered, key) => {
              if (res.data.hasOwnProperty(key)) {
                filtered[key] = res.data[key];
              }
              return filtered;
            }, {})
          };
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
      this.$refs.dialogDiy.openlog();
    }
  }
};
</script>

<style scoped lang="scss">
.msg-main {
  //padding: 30px;
  padding-bottom: 30px;
  .msg-item {
    width: 100%;
    display: flex;
    margin: 20px 0;
    > div {
      color: #222;
      &:first-child {
        width: 40%;
        text-align: right;
        padding-right: 10px;
      }
      &:last-child {
        width: 60%;
        text-align: left;
      }
    }
  }
}
</style>
